import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
function ParentRef() {
    const [count, setCount] = useState(0);

    const setCountCb = useCallback(() => {
        setCount((pre) => pre + 1)
    }, []);

    //! first side effect
    useEffect(() => {
        console.log("ParentEffect useEffect1");
        return () => {
            console.log("ParentEffect useEffect callBack1");
        }
    });

    //! second side effect
    useEffect(() => {
        console.log("ParentEffect useEffect2");
        return () => {
            console.log("ParentEffect useEffect callBack2");
        }
    });

    // const child = useMemo(() => <ChildEffect />, []);
    return (
        <div>
            {count}
            <button onClick={setCountCb}>+1</button>
            {/* {child} */}
            <ChildRef />
        </div>
    );
}

function ChildRef() {
    const inputEl = useRef(null);
    const onButtonClick = () => {
        // `current` 指向已挂载到 DOM 上的文本输入元素
        (inputEl!.current! as any).focus();
    };
    return (
        <>
            <input ref={inputEl} type="text" />
            <button onClick={onButtonClick}>Focus the input</button>
        </>
    );
}

export default ParentRef;
